<template>
  <div>
    <div class="profile" v-if="userInfo" @click="$router.push('/edit')">
      <img v-if="userInfo.head_img" :src="$axios.defaults.baseURL + userInfo.head_img" alt="" class="avatar">
      <img v-else src="@/assets/logo.png" alt="" class="avatar">
      <div class="info">
        <div class="name">
          <span class="iconfont iconxingbienan" v-if="userInfo.gender == 1"></span>
          <span class="iconfont iconxingbienv" v-else></span>
          {{userInfo.nickname}}
        </div>
        <div class="date">{{userInfo.create_date.split('T')[0]}}</div>
      </div>
      <span class="iconfont iconjiantou1"></span>
    </div>
    <NavBar 
      labelText="我的跟帖" 
      descText="发布的所有回复"
      @barClick="handleBar('跟帖')"  
    />
    <NavBar 
      labelText="我的关注" 
      descText="关注的用户"
      @barClick="$router.push('/follows')"  
    />

    <NavBar
      labelText="退出"
      descText="注销用户"
      @barClick="logout"
    />
  </div>
</template>

<script>
import NavBar from '@/components/NavBar'
export default {
  components: {
    NavBar
  },
  data() {
    return {
      userInfo: null
    }
  },
  mounted() {
    this.$axios({
      url: '/user/' + localStorage.getItem('userId'),
      method: 'get',
      headers: {
        Authorization: 'Bearer ' + localStorage.getItem('token')
      }
    }).then(res=>{
      console.log(res.data);
      const {message, data} = res.data;
      if (message == '获取成功') {
        this.userInfo = data;
        console.log(this.userInfo);
      }
    })
  },
  methods: {
    handleBar(pageName) {
      console.log(pageName);
    },
    logout() {
      // 1. 清理数据
      localStorage.removeItem('userId')
      localStorage.removeItem('token')
      // 2. 跳转
      this.$router.replace('/login')
    }
  }
}
</script>

<style lang="less" scoped>
.profile {
  display: flex;
  align-items: center;
  padding: 6.667vw;
  border-bottom: 4px solid #e4e4e4;
  .avatar {
    width: 19.444vw;
    height: 19.444vw;
    object-fit: cover;
    border-radius: 50%;
  }
  .info {
    flex: 1;
    padding-left: 2.778vw;
    font-size: 3.889vw;
    .name {
      .iconxingbienv {
        color: #f03fbe;
      }
      .iconxingbienan {
        color: #6fb0df;
      }
    }
    .date {
      padding-top: 1.667vw;
      color: #bbb;
    }
  }
}
</style>